<template>
    <div class="loginView">
        <div class="login">
            <h2 class="title">{{ useUser.restaurantName }}</h2>
            <div class="subTitle">员工订餐系统</div>
            <el-form ref="loginFormRef" :model="loginForm" :rules="rules" label-width="80px"
                style="width: 100%;display: flex;flex-direction: column;align-items: center;">
                <el-form-item label="工号" prop="jobNumber">
                    <el-input v-model="loginForm.jobNumber"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="loginForm.password"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="login">登录</el-button>

        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores'
import { Api } from '@/api/index.js'

const router = useRouter()
const useUser = useUserStore()
const loginFormRef = ref(null)
const loginForm = ref({
    jobNumber: '',
    password: ''
})
onMounted(() => {
    _getName()
})
const _getName = async () => {
    const res = await Api.getPrice()
    if (res.status === 200) {
        useUser.restaurantName = res.data.restaurantName
    } else {
        console.log(res)
    }
}
const rules = ref({
    jobNumber: [
        { required: true, message: '请输入工号', trigger: 'blur' },
        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
    ]
})

const login = () => {
    // 表单校验
    loginFormRef.value.validate((valid) => {
        if (valid) {
            console.log('校验成功');
        } else {
            console.log('false');
        }
    })
    Api.login(loginForm.value).then(res => {
        if (res.status === 200) {
            ElMessage({
                message: '登录成功',
                type: 'success'
            })
            useUser.token = res.token;
            useUser.user = res.user;
            router.push('/')
        } else {
            ElMessage({
                message: res.message,
                type: 'error'
            })
        }
    }).catch(error => {
        // 处理API请求错误
        ElMessage({
            message: '2',
            type: 'error'
        })
    })
} 
</script>


<style scoped lang="scss">
.loginView {
    background-color: #f5f5f5;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .login {
        width: 400px;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
            font-size: 24px;
            margin-bottom: 0px;
        }
        .subTitle{
            font-size: 18px;
            margin-bottom: 30px;
        }


    }
}
</style>